<template>
  <div class="view-full datum">
    <div class="datum_conten">
      <div class="datum_photo xinxi" @click="exchange(true)">
        <p class="f28">头像</p>
        <div class="photo alter">
          <div class="img">
            <img v-if="userInfo.userPhoto" :src="userInfo.userPhoto | hasdomain" @error="$event.target.src = require('@/assets/my/headImg.png')">
          </div>
          <i class="icon iconfont icon-jiantouyou"></i>
        </div>
      </div>
      <div class="datum_name xinxi ziliao" @click="amend()">
        <p class="f28">昵称</p>
        <div class="name alter">
          <span>{{userInfo.userName}} </span>
          <i class="icon iconfont icon-jiantouyou f28"></i>
        </div>
      </div>
      <div class="datum_birthdate xinxi ziliao" @click="founds()">
        <p class="f28">生辰八字</p>
        <div class="birthdate alter">
          <span>{{ifPerfect}} </span>
          <i class="icon iconfont icon-jiantouyou f28"></i>
        </div>
      </div>
      <!-- <div class="datum_site xinxi ziliao" @click="addList()">
        <p class="f28">我的收货地址 </p>
        <div class="site alter">
          <span>{{''}}</span>
          <i class="icon iconfont icon-jiantouyou f28"></i>
        </div>
      </div> -->
    </div>
    <div class="img_mask" v-if="ifMask" @click.capture.stop="exchange(false)">
      <ul class="img_mask_operate">
        <li>
          <h2 class="f30">选择图片</h2>
        </li>
        <!-- <li class="f26">拍照</li> -->
        <li class="f26 xiangce">
          <span>从相册中选择</span>
          <input type="file" accept="image/*" @change="handleFile" class="hiddenInput" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
	name: 'datum',
	data() {
		return {
			ifPerfect: '',
			sheetVisible: true,
			actions: [
				{
					name: '拍照',
					method: this.getCamera,
				},
				{
					name: '从相册中选择',
					method: this.getLibrary,
				}
			],
			userInfo: {
				avatar: 'http://demo.bjyoumeng.cn/Upload/shops/2018-10/5bd04185bbb91.png'
			},
			ifMask: false,
			userInfo: {}
		}
	},
	computed: {
		uid() {
			return this.$store.state.userId;
		}
	},
	methods: {
		getInfo() {
			this.$http.fetchGet('getUserDetail', {
				userId: this.uid,
			}).then(({data = {}}) => {
				this.userInfo = data;
			})
		},
		gethoro() {
			this.$http.fetchGet('checkBazilist', {
				userId: this.uid,
			}).then((res) => {
				if (res.code == 200) {
          if(res.data) {
            this.ifPerfect = '已完善'
          } else {
            this.ifPerfect = '待完善'
          }
				} else {
					
				}
			})
		},
		founds() {
			if (this.ifPerfect == '待完善') {
				this.$router.push({ //你需要接受路由的参数再跳转
					path: '/horoscope',
					query: {
						id: 0
					}
				})
			} else {
				this.$router.push({ //你需要接受路由的参数再跳转
					path: '/birthlist'
				})
			}
		},
		amend() {
			this.$router.push({ //你需要接受路由的参数再跳转
				path: '/modifyname',
				query: {
					name: this.userInfo.userName
				}
			})
		},
		addList() {
			this.$router.push({
				path: '/siteList'
			})
		},
		exchange(bool) {
			this.ifMask = bool;
		},
		getCamera: function () {
			console.log("打开照相机")
		},
		getLibrary: function () {
			console.log("打开相册")
		},
		// 打开图片上传
		uploadHeadImg: function () {
			this.$el.querySelector('.hiddenInput').click()
		},
		handleFile: function (e) {
			let $target = e.target || e.srcElement
			let file = $target.files[0]
			var reader = new FileReader()
			reader.onload = (data) => {
				let res = data.target || data.srcElement
				this.userInfo.avatar = res.result
				this.$http.fetchPost('UpdatePhoto', {
					userId: this.$store.state.userId,
					userPhoto: this.userInfo.avatar
				}).then(res => {
					if (res.code == 200) {
            this.$vux.toast.text('头像更改成功')
            this.getInfo()
					} else {
						this.$vux.toast.text('头像更改失败')
					}
				}, err => {
					console.log(err)
				})
				this.getInfo()
			}
			reader.readAsDataURL(file)
		},
	},
	mounted() {
		this.getInfo();
		this.gethoro();
	}
}
</script>

<style lang="less" scoped>
  .datum {
    .datum_conten {
      background: #f2f2f2;
      width: 100%;
      height: 100%;

      .xinxi {
        position: relative;
        background: #fff;
        .pl(20);
        .pr(20);
        .pr(240);

        .alter {
          position: absolute;
          top: 0px;
          right: 20px;

          i.icon {
            color: #666;
          }
        }

        p {
          color: #666;
        }
      }

      .ziliao {
        border-bottom: 1px solid #f2f2f2;
        .h(100);
        .lh(100);
      }

      .datum_photo {
        margin-bottom: 20px;
        .h(160);
        display: flex;
        p {
          .lh(160);
          color: #666;
        }
        .photo {
          .w(120);
          .h(120);
          .img{
            .w(120);
            .h(120);
            img {
              position: relative;
              right: 20px;
              top: 10px;
              .w(120);
              .h(120);
              border-radius: 50%;
            }
          }
          i {
            .mt(0);
            // transform:translateY(-25%);
            position: absolute;
            top: 50%;
            right: 0;
          }
        }
      }
    }

    .img_mask {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      background: rgba(0, 0, 0, .3);

      .img_mask_operate {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .w(620);
        .h(376);
        background: #fff;
        border-radius: 10px;
        box-sizing: border-box;
        .padd(0, 50);
        display: flex;
        flex-direction: column;

        li {
          flex: 1;
          .lh(124);
          color: #666;

          h2 {
            color: #333;
          }
        }

        .xiangce {
          position: relative;

          span {
            z-index: 9;
          }

          input {
            position: absolute;
            top: 20px;
            left: 0;
            z-index: 10;
            opacity: 0;
          }
        }
      }
    }
  }

  .head_img {
    .w(160);
    .h(160);

    img {
      width: 100%;
      height: 100%;
    }
  }

</style>
